import React from 'react';
import {Icon, message,Modal} from "antd";
const getLabel = WeaLocaleProvider.getLabel;

import './style/';
import {WeaLocaleProvider, WeaTools} from "ecCom";

class CustomApplication extends React.Component {

    state = {
        numberUrlResult:0
    }


    setImgSize = () =>{
        const w = $("#lr_customApplication_example_div2_img_"+this.props.container.id+"_"+this.props.outIndex+"_"+this.props.index).width()
        const h = $("#lr_customApplication_example_div2_img_"+this.props.container.id+"_"+this.props.outIndex+"_"+this.props.index).height()
        const wp = $("#lr_customApplication_example_div2_img_"+this.props.container.id+"_"+this.props.outIndex+"_"+this.props.index).parent().width()
        const hp = $("#lr_customApplication_example_div2_img_"+this.props.container.id+"_"+this.props.outIndex+"_"+this.props.index).parent().height()
        if(w > wp || h > hp){
            if(w/h > wp/ hp){
                $("#lr_customApplication_example_div2_img_"+this.props.container.id+"_"+this.props.outIndex+"_"+this.props.index).css({"width":"100%"})
                const htemp = $("#lr_customApplication_example_div2_img_"+this.props.container.id+"_"+this.props.outIndex+"_"+this.props.index).height();
                // $("#lr_customApplication_example_div2_img_"+this.props.container.id+"_"+this.props.outIndex+"_"+this.props.index).css({ 'margin-top':(hp-htemp)/2+"px"})
            }else if(w/h <=wp/ hp ){
                $("#lr_customApplication_example_div2_img_"+this.props.container.id+"_"+this.props.outIndex+"_"+this.props.index).css({"height":"100%"})
            }
        }else{

            // $("#lr_customApplication_example_div2_img_"+this.props.container.id+"_"+this.props.outIndex+"_"+this.props.index).css({"margin-top":(hp-h)/2+"px"})
        }

    }



    componentDidUpdate(){
        $("#lr_customApplication_example_div2_img_"+this.props.container.id+"_"+this.props.outIndex+"_"+this.props.index).css({"width":"auto","height":"auto",'margin-top':'0px'})
        const w = $("#lr_customApplication_example_div2_img_"+this.props.container.id+"_"+this.props.outIndex+"_"+this.props.index).width()
        const h = $("#lr_customApplication_example_div2_img_"+this.props.container.id+"_"+this.props.outIndex+"_"+this.props.index).height()
        const wp = $("#lr_customApplication_example_div2_img_"+this.props.container.id+"_"+this.props.outIndex+"_"+this.props.index).parent().width()
        const hp = $("#lr_customApplication_example_div2_img_"+this.props.container.id+"_"+this.props.outIndex+"_"+this.props.index).parent().height()

        if(w > wp || h > hp){
            if(w/h > wp/ hp){
                $("#lr_customApplication_example_div2_img_"+this.props.container.id+"_"+this.props.outIndex+"_"+this.props.index).css({"width":"100%",})
                const htemp = $("#lr_customApplication_example_div2_img_"+this.props.container.id+"_"+this.props.outIndex+"_"+this.props.index).height();
                // $("#lr_customApplication_example_div2_img_"+this.props.container.id+"_"+this.props.outIndex+"_"+this.props.index).css({ 'margin-top':(hp-htemp)/2+"px"})

            }else if(w/h <=wp/ hp ){
                $("#lr_customApplication_example_div2_img_"+this.props.container.id+"_"+this.props.outIndex+"_"+this.props.index).css({"height":"100%"})
            }
        }else{
            // $("#lr_customApplication_example_div2_img_"+this.props.container.id+"_"+this.props.outIndex+"_"+this.props.index).css({"margin-top":(hp-h)/2+"px"})
        }
    }


    urlOnClick = (url,urlType)=>{
        let target = 'mainFrame'
        let realUrl
        if(urlType == "1"){
            let jsonUrl = JSON.parse(url)
            realUrl = jsonUrl[0].fullrouteurl
            window.open(realUrl, '_blank');
        }else{
            realUrl = this.props.url
            if(realUrl.indexOf("wui/index.html")!=-1 && realUrl.indexOf("#")==-1){
                Modal.confirm({
                    title: getLabel(15172, '系统提示'),
                    content: getLabel(16628, '确定要退出系统吗？'),
                    onOk: () => {
                        WeaTools.callApi('/api/hrm/login/checkLogout', 'POST', {}).then((result) => {
                            window.open(realUrl, '_self');
                        });
                    }
                });

            }else{
                window.open(realUrl, '_blank');
            }
        }

    }


    handlerMouseOver = (index)=> {
           $("#lr_edit_"+index ).width($("#lr_logo_"+index ).width()/3)
           $("#lr_edit_"+index ).height($("#lr_logo_"+index ).height()/3)
           let  top = $("#lr_edit_"+index ).height()
           let left = $("#lr_edit_"+index ).width();
           $("#lr_edit_" + index).css("top",top)
           $("#lr_edit_" + index).css("left",left)
           $("#lr_edit_" + index).css("font-size",$("#lr_edit_"+index ).height())
           $("#lr_edit_" + index).show()
           $("#lr_delete_" + index).show()
           $("#lr_logo_"+index ).css("opacity","0.6")

    }

    getNumberLinkResutl = (url)=>{
        WeaTools.callApi(url, "POST" ).then((result) => {
            if(result.count && result.count >99){
                this.setState({numberUrlResult:"99+"})
            }else if(result.count && result.count <=99){
                this.setState({numberUrlResult:result.count})
            }

        });
    }

    componentWillReceiveProps(nextProps){
        if(nextProps.showNumberUrl){
            this.getNumberLinkResutl(nextProps.showNumberUrl)
        }

    }

    handlerMouseOut = (index)=>{
        $("#lr_edit_" + index).hide()
        $("#lr_logo_"+index ).css("opacity","1")
    }

    render() {
        $("#lr_customApplication_example_div2_img_"+this.props.container.id+"_"+this.props.index).css({width:"auto",height:"auto"})
        const {customApplicationSizeType,customApplicationSize,openPageHelper,pageSize}  = this.props.container
        let styles = []
        let newStyle =this.props.container.newStyle
        styles = (newStyle+"").split(",")
        let containerLR =""
        let containerTB = ""
        let applicationLR = ""
        let applicationTB = ""
        let containerRadius = ""
        let applicationDivRadius = ""
        let applicationFontColor = ""
        let containerBgi = ""
        let applicationLogoRadius = ""
        let logoTextMargin = ""
        if(styles.length == 10){
            containerLR = styles[0]
            containerTB = styles[1]
            applicationLR = styles[2]
            applicationTB = styles[3]
            containerRadius = styles[4]
            applicationDivRadius = styles[5]
            applicationFontColor = styles[6]
            containerBgi = styles[7]
            applicationLogoRadius = styles[8]
            logoTextMargin = styles[9]
        }

        const containerPadding = containerTB+"px "+containerLR+"px"

        let applicationMargin = applicationTB+"px "+applicationLR+"px"
        if(this.props.container.customApplicationSizeType == 1){
            if(this.props.index == 0  || parseInt(this.props.index+1)%parseInt(100/this.props.container.customApplicationSize) == 1) {
                applicationMargin = applicationTB +"px "+applicationLR+"px "+applicationTB+"px 0px"
            }else if( parseInt(this.props.index+1)%parseInt(100/this.props.container.customApplicationSize) == 0){
                applicationMargin = applicationTB +"px 0px "+applicationTB+"px "+applicationLR+"px"
            }
        }
        const containerRadiusReal = containerRadius+"px"
        const applicationDivRadiusReal = applicationDivRadius+"px"
        const applicationFontColorReal = "#"+applicationFontColor
        const containerBgiReal = containerBgi
        const applicationLogoRadiusReal = applicationLogoRadius+"px"




        return (
                       this.props.authority == 1 ? (
                       this.props.index != this.props.itemCount ? <div  style={{display:'inline-block',width:'180px',height: '150px','text-align':'center','background-color':this.props.bgc}}>
                           <div style={{width:'100%',height: '100%'}}>
                               <div style={{'line-height': 'center' ,width: '100%',height:'25%'}}></div>
                               <div style={{display: 'inline-block',width: '50%',height: '50%',position:"relative",cursor:"move"}} onMouseOver={()=>{this.handlerMouseOver(this.props.index)}} onMouseOut={() =>{this.handlerMouseOut(this.props.index)}}>
                                   <i id={"lr_edit_"+this.props.index} className="icon-coms-Need-feedback"  style={{position:"absolute",display:"none",'z-index':"3",'cursor':'pointer'}}  title={getLabel(26473, '编辑')} onClick={(e) => {this.props.setAddVisiableAndEditItem(this.props.index)}}/>
                                   <Icon id={"lr_delete_"+this.props.index} type="cross" style={{top: "-10px",
                                       right: "-10px",
                                       width: "20px",
                                       height: "20px",
                                       "line-height": "20px",
                                       "font-size": "13px",
                                       "border-radius": "10px","background-color":"gray",position:"absolute",'z-index':'3','color':'#ffffff','cursor':'pointer'}} title={getLabel(91, '删除')} onClick={(e) => {this.props.deleteApplicationById(this.props.index,this.props.id)}}/>
                                   <img id={"lr_logo_"+this.props.index} src={this.props.logo} style={{width:'100%',height: '100%'}}/>

                               </div>
                               <div style={{width: '100%',height:'25%'}} >
                                   <span style={{'display':'inline-block','line-height':'45.5px','font-size':'17px','color':this.props.customApplicationFontColor}}>{this.props.text}</span>
                               </div>
                           </div>
                       </div>
                           :<div   style={{display:'inline-block',width:'180px',height: '150px','text-align':'center'}}>
                               <div style={{width:'100%',height: '100%'}}>
                                   <div style={{'line-height': 'center' ,width: '100%',height:'25%'}}></div>
                                   <div style={{display: 'inline-block',width: '50%',height: '50%',position:"relative",cursor:"pointer"}} >
                                      {/*<img   style={{width:'100%',height: '100%'}} onClick={this.addCustomeApplicationExample}/>*/}

                                   </div>
                                   <div style={{width: '100%',height:'25%'}} >
                                       <span onClick={this.props.addCustomeApplicationExample}>+++++++</span>
                                   </div>
                               </div>
                           </div>

                       ):(
                               <div className={"lr_customApplication_example_"+this.props.container.id+" lr_customApplication_example_class"} onClick={()=>{this.urlOnClick(this.props.url,this.props.urlType)}} style={{position:'relative','background-color':this.props.bgc,margin:applicationMargin,'border-radius':applicationDivRadiusReal}}>
                                       <div style={{display:'inline-block','vertical-align':'middle'}}>
                                            <div  className={"lr_customApplication_example_div2_"+this.props.container.id+" lr_customApplication_example_div2_class"}  >
                                                       <img id={"lr_customApplication_example_div2_img_"+this.props.container.id+"_"+this.props.outIndex+"_"+this.props.index} src={this.props.logo} className={"lr_customApplication_example_div2_img_class"} style={{'border-radius':applicationLogoRadiusReal}} onLoad={this.setImgSize}/>
                                                       {
                                                           this.props.showNumberUrl ? (<span className={"lr_customApplication_showNumberUrl_resutl_"+this.props.container.id+" lr_customApplication_example_div2_img_number_class"}>{this.state.numberUrlResult}</span>)
                                                               :""
                                                       }

                                           </div>
                                           <div className={"lr_customApplication_text_span_new_" + this.props.container.id +" lr_customApplication_text_span_span_class"} style={{"width": "100%", "text-align": "center",'color': applicationFontColorReal}}>
                                             {this.props.text}
                                           </div>
                                       </div>
                                   <div style={{display:'inline-block','vertical-align':'middle','height':'100%'}}></div>

                           </div>
                       )

        );
    }



}

export default CustomApplication;